<form action="" class="form-horizontal" role="form">
	<div class="form-group">
		<label class="col-sm-2 control-label">场景图片</label>
		<div class="col-sm-10">
			<div class="house">
				<div class="house-item top" data-position="0"></div>
				<div class="house-item middle middle_1" data-position="1"></div>
				<div class="house-item middle middle_2" data-position="2"></div>
				<div class="house-item middle middle_3" data-position="3"></div>
				<div class="house-item middle middle_4" data-position="4"></div>
				<div class="house-item bottom" data-position="5"></div>
				<div class="upload-bg" id="upload-bg">
					<div class="upload-content"><a href="javascript:void(0)" id="upload-image" class="btn btn-default">上传图片</a></div>
				</div>
			</div>
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-8">
			<input type="hidden" name="category" id="category" value="{$_GET['cat_id']}"/>
			<div class="margin-top"><a class="btn btn-primary" id="house-post">提交更改</a></div>
		</div>
	</div>
</form>

<style>
	.images{width:150px; height:100px; max-height:100px; overflow:hidden; }
	.images > img{width:100%;}
	.house {position:relative; width:800px; height:600px;}
	.house .house-item, .house .upload-bg{ width:200px; height:200px; overflow:hidden;}
	.house .house-item img{width:200px;}
	.house .top{background:#0099cc; position:relative; left:0;}
	.house .middle{ float:left; display:inline-block;}
	.house .middle_1{ background:#2F83EC;}
	.house .middle_2{ background:#743737;}
	.house .middle_3{ background:#B84D88;}
	.house .middle_4{ background:#5BB793;}
	.house .bottom{ clear:both; background:#B72049; position:relative; left:0;}
	.upload-bg{position:absolute; left:0; top:0; text-align:center; line-height:200px; -webkit-transition:all .3s ease-in-out; background:rgba(0,0,0,0.2); }
	.upload-bg .upload-content{width:120px; height:30px; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto;}
	.upload-bg a{}
	#upload-image-button {position: absolute; left: -4px;}
	#SWFUpload_0{left:0; top:0;}
</style>

<!-- uploadify -->
<link rel="stylesheet" href="__PUBLIC__/Style/Common/uploadify/uploadify.css">
<script type="text/javascript" src="__PUBLIC__/Style/Common/uploadify/jquery.uploadify.min.js?{:rand(0,9999)}"></script>
<script type="text/javascript">

$(function() {
	
	//初始化显示图片
	var houseJson = {$houseJSON};
	if( houseJson.length ){
		$(".house-item").each(function(index){
			houseJson[index] && ( $(this).html("<img src='" + houseJson[index] + "'/>") );
		});
	}
	
	//pinObj防止上传时元素改变，houseData图片数据。
	var obj = {},
		pinObj = {},
		houseData = houseJson || new Array(6),
		category = $("#category").val(),
		id = {$_GET['id']};
	
	//上传层跟随，选择元素
	$(".house-item").bind("mouseenter", mouseEnter);
	function mouseEnter(){
		$("#upload-bg").css({ left: $(this).position().left, top:  $(this).position().top});
		obj.elem = this;
		obj.position = $(this).attr("data-position");
	}
	
	$("#upload-image").uploadify({
        'multi'			:	false,
        'buttonClass'	:	'margin-bottom',
        'fileSizeLimit' : 	'200kb',
        'buttonText'	:	'上传图片',
        'fileTypeDesc' 	: 	'Image Files',
        'fileTypeExts' 	: 	'*.jpg; *.png',
        'swf'			: 	'__PUBLIC__/Style/Common/uploadify/uploadify.swf',
        'uploader'		: 	'__CONTROLLER__/upload',
        'formData'		:	{cat_id: category},
        'onDialogOpen'		:	function(){ 
        	pinObj.elem = obj.elem;
        	pinObj.position = obj.position;
        },
        'onUploadSuccess'	: function(data, res){
        	
        	var	url = eval("(" + res + ")").extra.url;
        	houseData[pinObj.position] = url;		
        	$( pinObj.elem ).html( "<img src='"+url+"'/>" );
        }
    });
	
	//提交
	$("#house-post").click(function(){
		$.post("__CONTROLLER__/modifyPost", {pic:houseData.join("|"), category: category, id: id}, function(data){
			if( data.error == "0" ) {
				$().alertMsg({type: "success", msg: data.msg});
			} else {
				$().alertMsg({type: "danger", msg: data.msg});
			}
		});
	});
});
</script>